<template>
  <div>
    <div class="community-bg"></div>
    <div class="app-container">
      <div class="search-container">
        <div class="input-box">
          <el-input v-model="searchKey" placeholder="请输入内容"></el-input>
          <el-button type="primary" icon="el-icon-search" class="btn" @click="search">搜索</el-button>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="search-list">
        <div class="left">
          <div v-for="item in blogList" :key="item.bid">
            <BlogListItem :blog="item" />
          </div>
          <el-pagination background :page-size="form.pageSize" layout="prev, pager, next" :total="total"
            @current-change="handleCurrentChange"></el-pagination>
        </div>
        <div class="right">
          <el-button type="primary" icon="el-icon-edit" class="btn" @click="goEditBlog">发布文章</el-button>
        </div>

      </div>
    </div>

  </div>
</template>
 
<script>
import BlogListItem from '@/components/blog/blogListItem'
import { searchBlogList } from '@/api/blog'

export default {
  name: 'Community',
  components: {
    BlogListItem
  },
  created() {
    this.getBlogList()
  },
  data() {
    return {
      form: {
        pageNum: 1,
        pageSize: 5
      },
      blogList: [],
      total: null,
      searchKey: ''
    }
  },
  methods: {
    goEditBlog() {
      this.$router.push('/edit')
    },
    async getBlogList() {
      let res = await searchBlogList(this.form)
      if (res.code === 200) {
        console.log(res)
        const { blogList, total } = res.data
        this.blogList = blogList
        this.total = total
      } else {
        console.log('查询失败')
      }
    },
    handleCurrentChange(val) {
      this.form.pageNum = val
      this.getBlogList()
    },
    search() {
      this.form.title = this.searchKey
      this.getBlogList()
      this.form.title = null
    }
  }
}
</script>
 
<style lang="less" scoped>
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ff9d00;
  color: #FFF !important;
}

/deep/ .el-pager li:hover {
  color: #ff9d00 !important;
}

.community-bg {
  background: url('@/assets/images/community_bg.jpg') no-repeat top;
  height: 295px;
  background-size: cover;
  background-color: #efefef;
}

.app-container {
  width: 1000px;
  margin: 0 auto;

  .search-container {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;

    .input-box {
      width: 670px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 3px solid goldenrod;

      /deep/ .el-input__inner {
        height: 40px;
        border-color: #ffd04b;
        border-radius: none;
        border: none;
      }

      .el-button {
        height: 40px;
        border-radius: 0px;
        border: 0px;
      }

      .el-button--primary {
        background-color: goldenrod;
        border-color: goldenrod;

      }
    }

  }

  .search-list {
    display: flex;
    justify-content: space-between;

    .right {

      /deep/ .el-input__inner {
        height: 40px;
        border-color: #ffd04b;
        border-radius: none;
        border: none;
      }

      .el-button {
        height: 40px;
        border-radius: none;
        border: none;
      }

      .el-button--primary {
        background-color: goldenrod;
        border-color: goldenrod;

      }
    }

    .el-pagination {
      margin-bottom: 10px;
    }
  }


}
</style>